<!DOCTYPE html>
<html>
	<head>
		<title>帮助中心</title>
		<meta charset="UTF-8" />
		<link rel="stylesheet" type="text/css" href="_assert/css/helpCenter.css"/>
	</head>
	<body>
		<div class="search_bar">
			<div class="container">
				<div class="search_input">
					<input type="text" placeholder="请输入搜索的内容" />
				</div>
				<div class="search_btn">
					<img class="img" src="_assert/img/icon_search.png" />
				</div>
			</div>
		</div>

		<div class="content">
			<div class="container">
				<div class="title">
					我们是谁
				</div>
			</div>
			<div class="divider"></div>
			<div class="container">
				<div class="detail">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipis
						cing elit. Aenean euismod bibendum laoreet. Proin
						gravida dolor sit amet lacus accumsan et viverra jus
						to commodo. Proin sodales pulvinar tempor. Cum s
						ociis natoque penatibus et magnis dis parturient mo
						ntes, nascetur ridiculus mus. Nam fermentum, nulla
						luctus pharetra vulputate, felis tellus mollis orci, sed
						rhoncus sapien nunc eget odio.

					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipis
						cing elit. Aenean euismod bibendum laoreet. Proin
						gravida dolor sit amet lacus accumsan et viverra jus
						to commodo. Proin sodales pulvinar tempor. Cum s
						ociis natoque penatibus et magnis dis parturient mo
						ntes, nascetur ridiculus mus. Nam fermentum, nulla
						luctus pharetra vulputate, felis tellus mollis orci, sed
						rhoncus sapien nunc eget odio.

					</p>
				</div>
			</div>
		</div>
		<div class="content" style="display: none;">
			<div class="container">
				<div class="title">
					如何登陆
				</div>
			</div>
			<div class="divider"></div>
			<div class="container">
				<div class="detail">
					<p>
						Lorem ipsum dolor sit amet, consectetur adipis
						cing elit. Aenean euismod bibendum laoreet. Proin
						gravida dolor sit amet lacus accumsan et viverra jus
						to commodo. Proin sodales pulvinar tempor. Cum s
						ociis natoque penatibus et magnis dis parturient mo
						ntes, nascetur ridiculus mus. Nam fermentum, nulla
						luctus pharetra vulputate, felis tellus mollis orci, sed
						rhoncus sapien nunc eget odio.

					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipis
						cing elit. Aenean euismod bibendum laoreet. Proin
						

					</p>
				</div>
			</div>
		</div>
		<div class="content" style="display: none;">
			<div class="container">
				<div class="title">
					没有小区名称
				</div>
			</div>
			<div class="divider"></div>
			<div class="container">
				<div class="detail">
					<p>
						ociis natoque penatibus et magnis dis parturient mo
						ntes, nascetur ridiculus mus. Nam fermentum, nulla
						luctus pharetra vulputate, felis tellus mollis orci, sed
						rhoncus sapien nunc eget odio.

					</p>
					<p>
						Lorem ipsum dolor sit amet, consectetur adipis
						cing elit. Aenean euismod bibendum laoreet. Proin
						gravida dolor sit amet lacus accumsan et viverra jus
						

					</p>
				</div>
			</div>
		</div>

		<div class="bottom">
			<div class="container">
				<div style="border: 1px solid #95bba5;border-radius: 5px;">
					<div class="b1">
						<div class="bf">
							关于我们
						</div>
						<div class="br"><img class="open"  src="_assert/img/shousuo.png" />
						</div>
					</div>
					<div class="b2">
						<ul>
							<li class="focus"><img src="_assert/img/radio.png">我们是谁
							</li>
							<li><img src="_assert/img/radio1.png">如何登陆
							</li>
							<li><img src="_assert/img/radio1.png">没有小区名称
							</li>
						</ul>
					</div>
					<div class="b1 e">
						<div class="bf">
							房产知识
						</div>
						<div class="br"><img src="_assert/img/shousuo1.png" />
						</div>
					</div>
					<div class="b2 e">
						<ul style="display: none;">
							<li class="focus"><img src="_assert/img/radio.png">我们是谁
							</li>
							<li><img src="_assert/img/radio1.png">如何登陆
							</li>
							<li><img src="_assert/img/radio1.png">没有小区名称
							</li>
						</ul>
					</div>
				</div>
			</div>
		</div>
		<script type="text/javascript" src="_assert/js/jquery-1.11.2.min.js"></script>
		<script type="text/javascript">
			$(".bottom .br img").click(function() {
				$parent = $(this).parent().parent();
				if ($(this).hasClass("open")) {
					$(this).removeClass("open").attr("src", "_assert/img/shousuo1.png");
					$parent.next(".b2").children("ul").slideUp(function() {
						if (!$parent.hasClass("e")) {
							$parent.addClass("open");
						}
					});

				} else {
					$(this).addClass("open").attr("src", "_assert/img/shousuo.png");
					if (!$parent.hasClass("e")) {
						$parent.removeClass("open");
					}
					$parent.next(".b2").children("ul").slideDown();
					$parent.siblings(".b1").find("img").removeClass("open").attr("src", "_assert/img/shousuo1.png");
					$parent.siblings(".b1").next(".b2").children("ul").slideUp(function() {
						if (!$(this).parent().prev().hasClass("e")) {
							$(this).parent().prev().addClass("open");
						}
					});
				}

			});
			$(".bottom .b2 ul li").bind("click " , function() {
					$(this).children("img").attr("src", "_assert/img/radio.png");
					$(this).siblings().children("img").attr("src", "_assert/img/radio1.png");
					$(this).siblings().removeClass("focus").end().addClass("focus");
				$("div.content").hide().eq($(this).index()).show();
				});
			$(".bottom .b2 ul li").hover(function() {
				$(this).children("img").attr("src", "_assert/img/radio.png");
					$(this).siblings().removeClass("hover").end().addClass("hover");
			}, function() {
				if(!$(this).hasClass("focus")){
				$(this).children("img").attr("src", "_assert/img/radio1.png");
				$(this).siblings().addClass("hover").end().removeClass("hover");}
			});
		</script>
	</body>
</html>